<template>
	<view class="calendar-selection-box">
		<Button2 class="btn" :class="nowCalendar==btn.id?'checked':' no-checked'" v-for="btn in calendarList"
			:key="btn.id" @click="changeNowCalendar(btn.id)">
			{{btn.name}}
		</Button2>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	import Button2 from '@/components/button2/button2.vue';
	const emits = defineEmits(['changeDate'])
	// 日期选择列表
	const calendarList = ref([{ name: '当日', id: 1 }, { name: '近一周', id: 2 }, { name: '近两周', id: 3 }, { name: '近三周', id: 4 }, { name: '近一月', id: 5 }, { name: '自定义', id: 6 },]);
	// 当前选择的日期
	const nowCalendar = ref(1)
	// 改变当前日期
	const changeNowCalendar = (id) => {
		nowCalendar.value = id
		emits('changeDate', id)
	}
</script>

<style scoped lang="scss">
	.calendar-selection-box {
		display: flex;
		justify-content: space-between;
		margin: 0rpx 32rpx;
		padding: 20rpx 18rpx 20rpx 10rpx;
		border-radius: 16rpx;
		background-color: #fff;
		box-sizing: border-box;

		.btn {
			margin-left: 8rpx;
			padding: 8rpx 16rpx;
			border-radius: 4rpx;
			white-space: nowrap;
		}

	}
</style>